<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .gary{
            color: gray;
        }
        .black{
            color: black;
        }
        .box12{
            position: absolute;
            width:200px;
            height: 200px;
            background-color: violet;
            margin-top: 20px;
            left: 0;
        }
        </style>
</head>
<body>
    <p>5. 设置下拉框中的默认随机选中项，自己书写结构和js。    </p>
    <input type="button" value="选择" id="btn">
    <select name="" id="city">
        <option >上海</option>
        <option >广东</option>
        <option >北京</option>
        <option >厦门</option>
        <option >山东</option>
    </select>
    <br>
    <p>6. 编写一段程序，实现文本框获取和失去焦点效果。要求：1、获得焦点时，如果内部内容为提示语 请输入搜索关键字 ，清空内容并且设置文字颜色为黑色；2、失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色    </p>
    <input type="text" value="请输入搜索关键字" id="textSearch" class="gray">
    <p>7. class="erweima hide" id="er"，将class的属性值中的hide更换为show，其他保持不变，请写出适合的方法。    </p>
    <div class="erweima hide" id="er"></div>
    <p>8.  有一组文本框，要求让每一个文本框在自己输入的时候，背景显示灰色，其他文本框显示白色。</p>
    <input type="text" name="" id="" class="texts8" >
    <input type="text" name="" id="" class="texts8" >
    <input type="text" name="" id="" class="texts8" >
    <input type="text" name="" id="" class="texts8" >
    <p>9.  在box元素中动态创建无序列表，自定义列表项内容。</p>
    <div id="box9">
    </div>
    <p>10. 利用事件委托的方法，给一个无序列表的列表项添加点击更改背景色事件。简单说明思路。</p>
        <ul id = "list10">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
        <p>11. 请自定义一个注册事件的兼容函数，要求兼容三种注册事件方法。</p>
        <input type="button" name="" id="anniu11" value="按钮">
        <p>12. 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户多次点击出现加速且运动不能停止的情况，请给出解决代码。        </p>
        <input type="button" value="开始" name="" id="btn12a">
        <input type="button" value="停止" name="" id="btn12b">
        <div id="box12" class="box12"></div>
    <script>
        var btn = document.getElementById("btn");
        var city = document.getElementById("city");
        var opts = document.getElementsByTagName("option");
        var textSearch = document.getElementById("textSearch");
        textSearch.onfocus = function () {
            if(this.value === "请输入搜索关键字"){
                this.value = "";
                this.className = "black";
            };
        };
        textSearch.onblur = function () {
                if (this.value === "" || this.value === "请输入搜索关键字" ) {
                    this.value = "请输入搜索关键字";
                    this.className = "gray";
                };
            };
        btn.onclick = function () {
            var n = Math.floor(Math.random() * opts.length);
            // console.log(n);
            opts[n].selected = true;
        };
        var er = document.getElementById("er");
        er.className = er.className.replace("hide","show");
        console.dir(er);
        var texts8 = document.getElementsByClassName("texts8");
        // 添加批量的获取焦点事件
        for (var i = 0 ; i < texts8.length ; i++) {
            texts8[i].onfocus = function () {
                for (var j = 0 ; j < texts8.length ; j++) {
                    texts8[j].style.backgroundColor = "";
                }
                this.style.backgroundColor = "gray";
            };
        }
    var box9 = document.getElementById("box9");
    var names = ["AAA","BB","CC","DD"];
    var ul = document.createElement("ul");
    box9.appendChild(ul);
    for (var i = 0; i < names.length ; i++) {
      var li = document.createElement("li");
      ul.appendChild(li);
      li.innerText = names[i];
    }
    var list10 = document.getElementById("list10");
    var lists = list10.children;
    list10.onclick = function (e) {
        for(i = 0;i < lists.length;i++){
            lists[i].style.backgroundColor = "";
        }
        e.target.style.backgroundColor = "gray";
    }
    // 11 注册事件兼容
    var anniu11 = document.getElementById("anniu11");
    addEvent(anniu11,"click",function () {
      alert(1);
    });
    // DOM 2 级事件绑定方式
    // 自己制作一个兼容所有浏览器的绑定事件的函数
    // 参数：事件源，事件类型，事件函数
    function addEvent(ele,type,fn) {
      // IE 9 及以上的浏览器和其他浏览器，使用 addEventListener 方法
      // IE 9 以下的浏览器，使用 attachEvent 方法
      // 浏览器能力检测
      if (ele.addEventListener) {
        ele.addEventListener(type,fn);
      } else if (ele.attachEvent) {
        ele.attachEvent("on" + type,fn);
      }
    }
    // 12.开始停止定时器
    var btn12a = document.getElementById("btn12a");
    var btn12b = document.getElementById("btn12b");
    var box12 = document.getElementById("box12");
    var nowleft = 0;
    var time12;
    btn12a.onclick = function () {
        clearInterval(time12);
        time12 = setInterval(function () {
        nowleft += 5;
        box12.style.left = nowleft + "px";
    },100);
    };
    btn12b.onclick = function () {
        clearInterval(time12);
    };
    </script>
</body>
</html>